<template>
<!-- 分享 -->
  <div id="share">
    <CompIcon :iconStyle="iconStyle" v-if="compIconShow" :compIconContent="compIconContent"/> 
    <div class="contribution-content">
    <div  v-for="(item, index) in contrContent" :key="index" v-if="index>=contStart&&index<=contEnd" >
      <div class="contribution-list">
        <NavListDetComp :detailContent="item" @popContent="popContent"/>
      </div>
    </div>
    <div class="paging">
      <Paging :pages="pages" @pageData="pageData"/>
    </div>
  </div>
	</div>
</template>

<script>
  import NavListDetComp from '@/components/navDetails/navListDetComp'
  // 分页
  import Paging from '@/components/public/paging'
  // 子路由中点赞和收藏组件
  import CompIcon from '@/components/public/compIcon'
  export default {
  	components: {
  	  NavListDetComp,
  	  Paging,
  	  CompIcon
  	},
  	data () {
      return {
        contrContent: [], // list内容
        contrNum: 10, // 一个页面加载多少条数据
        contStart: 0, // 当前页的第一条数据
        contEnd: 9, // 当前页的最后一条数据
        pages: null, // 总共多少页
        iconStyle: { // 收藏点赞点击弹框位置
			'marginTop':'-200px',
			'marginLeft': '300px'
        },
        popStyle: { // 弹框背景颜色的大小
          width: '400px',
          height: '390px'
        },
		compIconContent: '', // CompIcon的内容
		compIconShow: false // compIcon是否显示
      }
  	},
  	created () {
  		var that = this
  		that.$http.get('../../../../static/json/navListDetail.json')
		.then(res => {
			var data = res.data.data
			for (var i = 0 , l = data.length ; i < l ; i++) {
				var contentLength = data[i].content.length
				if (contentLength > 60) {
					data[i].content = data[i].content.substring(0,61)+"..."
				}
			}
			that.pages = Math.ceil(data.length / that.contrNum)
			that.contrContent = JSON.parse(JSON.stringify(data))
		})
		.catch(error => {
			console.log(error)
		})
  	},
  	methods: {
  		// 从分页子组件从来的参数，处理当前页面的应该是那些数据
  		pageData (value) {
  			var that = this
  			that.contStart = that.contrNum*(value-1)
        that.contEnd = that.contrNum*value-1
  		},
  		// 从contribution子组件传来的参数，用来处理
  		popContent (value) {
  			var that = this
  			that.compIconContent = value
  			that.compIconShow = true
  			setTimeout (function () {
  				that.compIconShow = false
  			},3000)
  		}
  	},
  	mounted () {
      var that = this
      function changeShiTu (shiTu) {
        var stWidth = window.innerWidth
        var stHeight = window.innerHeight
        var marTop = stHeight / 2 - 125
        var marLeft = stWidth / 2 - 182
        shiTu.popStyle.width = stWidth + 'px'
        shiTu.popStyle.height = stHeight + 'px'
        shiTu.deleteStyle.marginTop = marTop + 'px'
        shiTu.deleteStyle.marginLeft = marLeft + 'px'
      }
      changeShiTu(that)
      window.onresize = function () {
        changeShiTu(that)
      }
    },
  }
</script>

<style>
   @import "../../../../../static/knowChilde/collect.css";
</style>

